<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // Model 数据模型
        let msg = "Hello MVVM";

        // ViewModel 视图模型
        // 页面加载事件
        window.onload = function(){
            // 获取元素节点
            let s1 = document.getElementById("s1");
            let inText = document.getElementById("inText");

            // Model --> View
            // 将数据模型Model中msg的值赋值到视图view中
            s1.innerHTML = msg;
            inText.value = msg;

            // 监听input元素,当文本框中内容发生改变时,数据模型中msg数据随之改变
            inText.oninput = function(){
                // view --> Model
                msg = this.value;
                s1.innerHTML = msg;
            }
        }
    </script>
</head>
<body>
    <div>
        <span id="s1"></span><br>
        <input type="text" id="inText">
    </div>
</body>
</html>